<template>
	<view class="content">
		<topBox buttonType="small"></topBox>
		<view class="list-wrap">
			<view class="list-item" v-for="(item, index) in list" :key="index">
				<view class="item-title">
					<text class="name">
						{{ item.recruit_type_work }}
					</text>
					<text class="price">{{ item.recruit_salary }}</text>
				</view>
				<view class="item-con">
					<view class="con-row">
						<text class="txt">地址：</text>
						<view class="txt-con">{{ item.recruit_address }}</view>
					</view>
					<view class="con-row">
						<!-- <text class="txt">留言：</text> -->
						<view class="txt-con" style="color: #f00;">{{ item.recruit_content || ''}}</view>
					</view>
					<view class="con-row">
						<text class="txt">工作内容：</text>
						<view class="txt-con">{{ item.recruit_requirement || ''}}</view>
					</view>
					<view class="flex" style="margin-bottom: 10rpx;">
						<view class="txt">
							发布时间：{{item.recruit_create_time}}
						</view>
						<view class="status">
							<text>距离您{{item.recruit_distance}}公里</text>
						</view>
					</view>
				</view>
				<view class="flex">
					<u-avatar class="headImg" :src="item.avatarUrl" mode="square"></u-avatar>
					<view style="flex: 1;text-align: center;">
						本项目专用联系电话
						<view class="a" v-for="mItem in item.mobile" :key="mItem.mobile" @click="callPhone(mItem.mobile)">
							{{mItem.mobile}}
						</view>
					</view>
				</view>
				<view class="" v-if="item.receiving != ''">
					<view class="small_item bottom" style="margin: 20rpx 0;" v-for="sGitem in item.receiving" :key="sGitem.receiving_id">
						<view class="flex" style="height: 80rpx;line-height: 80rpx;justify-content: space-around;">
							<!-- <view class="td name">id： {{sGitem.receiving_id}}</view> -->
							<u-avatar style="display: flex;" size="80" :src="sGitem.avatarUrl" mode="circle"></u-avatar>
							<view class="td name">{{sGitem.nickname}}</view>
							<view class="td phone a" @click="callPhone(sGitem.phone)">{{sGitem.phone}}</view>
							<!-- <u-button v-if="!sGitem.receiving_submit_time" size="mini" type="primary" @click="showFormS(sGitem)">添加员工</u-button> -->
						</view>
						<view class="staff_info">
							<view class="tr flex border_bottom">
								<view class="td border_right over-word">{{sGitem.receiving_name || '-'}}</view>
								<view class="td phone border_right over-word">{{sGitem.receiving_mobile || '-'}}</view>
								<u-button v-if="sGitem.receiving_id_card" size="mini" type="primary" @click="showImg(sGitem)">身份证</u-button>
							</view>
							<view class="tr flex border_bottom">
								<view class="td border_right">
									{{sGitem.receiving_time ? sliceStr(sGitem.receiving_time) : '-'}}
								</view>
								<view class="td phone border_right">
									{{sGitem.receiving_submit_time ? sliceStr(sGitem.receiving_submit_time) : '-'}}
								</view>
								<view class="td code border_right">
									{{sGitem.receiving_entry_time ? sliceStr(sGitem.receiving_entry_time) : '-'}}
								</view>
								<view class="td">
									{{sGitem.receiving_quit_time ? sliceStr(sGitem.receiving_quit_time) : '-'}}
								</view>
							</view>
							<view class="tr flex border_bottom">
								<view class="td border_right">报名</view>
								<view class="td phone border_right">提交</view>
								<view class="td code border_right">入职</view>
								<view class="td ">离职</view>
							</view>
						</view>
						<u-button v-if="sGitem.is_show" type="info">已提交</u-button>
						<u-button v-else :custom-style="{background: '#333333'}" @click="submitBig(sGitem)" type="primary" :display="sGitem.is_show || !sGitem.receiving_mobile">提交员工资料给大中介</u-button>
					</view>
				</view>
			</view>
			<!-- <u-popup v-model="show" mode="center" width="600rpx" height="500rpx">
				<u-form ref="uForm" :model="form" label-width="160">
					<u-form-item label="上传身份证" label-width="400" label-position="top">
						<image class="del" src="/static/image/del.png" mode="" @click.stop="deleteImg(key)"></image>
						<image v-if="img.images_file_type == 'image'" class="img" :src="img.images_url" mode="aspectFill"></image>
						<view class="upload-img" @click.stop="uploadImg">
							<u-icon name="plus" size="50"></u-icon>
						</view>
					</u-form-item>
				</u-form>
			</u-popup> -->
			<u-popup v-model="show" mode="center" width="600rpx">
				<view class="popup" >
					<u-form ref="uForm" :model="uForm">
						<u-form-item label="姓    名" prop="receiving_name"  label-width="120upx" required>
							<u-input v-model="uForm.receiving_name" maxlength="11" type="text" :border="true" style="width: 400upx;" />
						</u-form-item>
						<!-- <u-form-item label="身份证号" prop="receiving_id_card" label-width="120upx" required>
							<u-input v-model="uForm.receiving_id_card" maxlength="18" type="text" :border="true" style="width: 400upx;" />
						</u-form-item> -->
						<u-form-item label="上传身份证" prop="receiving_id_card" label-width="120upx" required>
							<!-- <image class="del" src="/static/image/del.png" mode="" @click.stop="deleteImg(key)"></image> -->
							<view class="upload-img" @click.stop="uploadImg">
								<image v-if="uForm.receiving_id_card" class="upload-img" :src="uForm.receiving_id_card" mode="aspectFill"></image>
								<u-icon v-else name="plus" size="50"></u-icon>
							</view>
						</u-form-item>
						<u-form-item label="手机号码" prop="receiving_mobile" label-width="120upx" required>
							<u-input v-model="uForm.receiving_mobile" maxlength="11" type="text" :border="true" style="width: 400upx;" />
						</u-form-item>
						<!-- <u-form-item label="提交给大中介" prop="is_show" label-width="120upx" required>
							<u-radio-group v-model="uForm.is_show">
								<u-radio name="1">是</u-radio>
								<u-radio name="0">否</u-radio>
							</u-radio-group>
						</u-form-item> -->
					</u-form>
					<u-button @click="submit" :custom-style="customStyle">提交</u-button>
				</view>
			</u-popup>
			<!-- 查看身份证 -->
			<u-popup v-model="showImgeModel" mode="center" width="600rpx" height="500rpx">
				<view class="codePup">
					<image class="del" src="/static/image/del.png" mode="" @click.stop="showImgeModel = false"></image>
					<image class="img" :src="imgCodeUrl" mode="aspectFill"></image>
				</view>
			</u-popup>
			<!-- 数据为空 -->
			<u-empty v-if="list.length == 0" text="暂无数据~" :margin-top="100"></u-empty>
			<!-- 加载更多 -->
			<u-loadmore v-if="list.length" :status="loadStatus" bg-color="#f5f8ff" :margin-top="20" :margin-bottom="20" />
		</view>
		<tabBar :selected="2"></tabBar>
	</view>
</template>

<script>
import {
	apiUrl,
	uploadFiles,
	deleteFiles,
	filterTime
} from '@/common/config.js';
import { mapState } from 'vuex';
import topBox from '../../components/top-box/top-box.vue';
import tabBar from '../../components/tabBar/tabBar.vue';
export default {
	components: {
		topBox,
		tabBar
	},
	data() {
		return {
			videoCurrTime: 0,
			imgCodeUrl: '',
			showImgeModel: false,
			videoTitle: 'zhemvopswemvop    wjfopjeowjmpiojm',
			loadStatus: 'nomore',
			params: {
				startRow: 1,
				rowSize: 6,
				latitudes: 32,
				longitudes: 43,
				status: 'FB'
			},
			list: [],
			imageCode: '',
			show: false,
			userId: '',
			action: 'http://www.example.com/upload',
			customStyle: {
				'background': '#E04110',
				'border-color': '#E04110',
				'color': '#fff'
			},
			fileList: [
				{
					url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
				}
			],
			uForm: {
				receiving_id: null,
				receiving_name: null,
				receiving_id_card: null,
				receiving_mobile: null,
				is_show: null,
			},
			rules: {
				receiving_mobile: [
					{
						required: true,
						message: '联系电话 必填',
						// trigger: ['change','blur']
					}
				],
				// is_show: [
				// 	{
				// 		required: true,
				// 		message: '是否提交到大中介 必填',
				// 		// trigger: ['change','blur']
				// 	}
				// ],
				receiving_name: [
					{
						required: true,
						message: '姓名 必填',
						// trigger: ['change','blur']
					}
				],
				receiving_id_card: [
					{
						required: true,
						message: '身份证号 必填',
						// trigger: ['change','blur']
					}
				],
			}
		};
	},
	computed: {
		...mapState({
			// userId: state => state.userId
		})
	},
	onShow() {
		uni.hideTabBar()
	},
	onLoad(e) {
		this.userId = uni.getStorageSync('userId');
		let token = uni.getStorageSync('token');
		if (token) {
			// this.generateCode();
		}
		if (e.scene) {
			let scene = decodeURIComponent(e.scene);
			uni.setStorageSync('recId', e.scene);
		}
	
		uni.getLocation({
			type: 'wgs84',
			success: res => {
				this.params.latitudes = res.latitude;
				this.params.longitudes = res.longitude;
				this.postGetActivityList('up');
			}
		});
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onPullDownRefresh() {
		this.dropDown();
	},
	onReachBottom() {
		this.pullUp();
	},
	onShareAppMessage(res) {
		return {
			title: `嗨！快来加入我们平台吧`,
			imageUrl: '../../static/image/share.jpg',
			path: 'pages/index/full-screen'
		}
	},
	methods: {
		callPhone(phone) {
			if(!phone) return
			uni.makePhoneCall({
				phoneNumber: '' + phone
			})
		},
		showImg(sGitem) {
			this.imgCodeUrl = sGitem.receiving_id_card;
			this.showImgeModel = true
		},
		showFormS(item) {
			
			
			this.$nextTick(() => {
				this.$refs.uForm.resetFields()
				this.uForm.receiving_id = item.receiving_id
				this.uForm.receiving_mobile = item.phone
				this.show = true
			})
			
		},
		submitBig(row) {
			if(!row.receiving_name) {
				this.uForm.is_show = 1
				this.showFormS(row)
			} else {
				this.uForm = {
					receiving_id: row.receiving_id,
					receiving_name: row.receiving_name,
					receiving_id_card: row.receiving_id_card,
					receiving_mobile: row.receiving_mobile,
					is_show: 1,
				}
				this.postRequtst()
			}
			console.log(row)
		},
		submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					this.postRequtst()
				} else {
					console.log('ceshi',valid )
				}
			})
			
		},
		postRequtst() {
			this.$u.api.fillInformation(this.uForm).then(res => {
				this.show = false
				if (res.status == true) {
					uni.showToast({
						title: res.msg,
						duration: 2000
					});
					this.params.startRow = 1
					this.list = []
					this.postGetActivityList('up');
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			})
		},
		toDesc(recruit_id){
			if(!recruit_id){
				return uni.showToast({
					title:'数据异常，请稍后再试',
					icon:'none'
				})
			}
			uni.navigateTo({
				url:'../preview/previewDetail?recruit_id='+recruit_id
			})
			console.log(recruit_id)
		},
		goPublish(){
			uni.navigateTo({
				url:'../talent/publish-post'
			})
		},

		// 下拉刷新
		dropDown() {
			console.log('down');
			// 修改当前view的数据
			this.params.startRow = 1;
			// 加载下拉刷新的数据
			this.postGetActivityList('down');
		},
		// 上拉加载
		pullUp() {
			console.log('up');
			// 增加页数
			this.params.startRow++;
			// 请求获取数据
			this.postGetActivityList('up');
		},
		// 活动管理-查询活动列表
		postGetActivityList(type) {
			this.$u.api
				.samllMyRecruits(this.params)
				.then(res => {
					uni.stopPullDownRefresh();
					if (res.status == true) {
						let data = res.data;
						// 如果是上拉加载
						if (type == 'up') {
							// 判断分页
							if (res.data.length <= this.params.rowSize) {
								for (var i = 0; i < res.data.length; i++) {
									this.list.push(res.data[i]);
								}
								this.loadStatus = 'loading';

								// 如果数量小于页容量，显示没有更多数据
								if (res.data.length < this.params.rowSize) {
									this.loadStatus = 'nomore';
								}
							} else {
								this.params.rowSize = res.data.total;
								this.loadStatus = 'nomore';
							}
						}

						// 如果是下拉刷新
						if (type == 'down') {
							// 将数据
							for (var i = 0; i < res.data.length; i++) {
								this.list.push(res.data[i]);
							}

							this.list.splice(0, this.list.length == 0 ? 0 : this.list.length - res.data.length);
						}
					}
				})
				.catch(err => {
					uni.stopPullDownRefresh();
				});
		},
		generateCode() {
			let params = {
				busiType: 1,
				busiId: uni.getStorageSync('userId') + ',GG',
				url: 'pages/index/index'
			};
			this.$u.api.postGenerateQrCode(params).then(res => {
				if (res.status == true) {
					this.imageCode = 'data:image/jpeg;base64' + res.data;
				}
			});
		},
		uploadImg(key) {
			uploadFiles(res => {
				console.log(res)
				let img = {
					images_url: 'https://' + res.data.url, //图片的显示地址 yzr2020-1258429991.cos.ap-nanjing.myqcloud.com/media/20201017/7cffd99c69ae04b7a0cf5b8cd09f92ee
					images_id: res.data.id, //图片路径  media/20201017/7cffd99c69ae04b7a0cf5b8cd09f92ee
					images_file_type: res.data.fileType
				}
				this.$set(this.uForm, 'receiving_id_card', img.images_url)
				this.$u.api.postSaveImages(img).then(res => {
					console.log(res)
					if (res.status == true) {
						console.log('11'.res);
					}
				}).catch(err => {
					console.log(err)
				})
				// this.images.push(img);
				console.log(this.images)
			})
		},
		preview(url, urls) {
			uni.previewImage({
				current: url,
				urls: urls.map(item => item.url)
			});
		},
		sliceStr(str) {
			if(!str || typeof str !== 'string') return
			return str.slice(0, 10).replace(/-/g, '.')
		}
	}
};
</script>

<style lang="scss" scoped>
.flex{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.content {
	position: relative;
	// padding-top: 240upx;
	padding-bottom: 30rpx;	
	.publish_btn{
		margin: 20upx;
	}
	.list-wrap {
		padding: 0 20upx 20upx;
		position: relative;
		z-index: 10;
		.list-item {
			padding: 30upx 20upx 10upx;
			background: #fff;
			box-shadow: 0px 3px 7px 0px rgba(218, 218, 218, 0.35);
			border-radius: 6px;
			margin-bottom: 20upx;

			.item-title {
				display: flex;
				justify-content: space-between;
				margin-bottom: 24upx;

				.name {
					font-size: 30upx;
					font-weight: bold;
					color: rgba(101, 101, 101, 1);
				}

				.price {
					font-size: 26upx;
					font-weight: bold;
					color: rgba(236, 71, 21, 1);
				}
			}

			.item-con {
				border-bottom: 1px solid rgba(221, 221, 221, 1);
				margin-bottom: 10upx;
				padding-bottom: 10upx;

				.con-row {
					display: flex;
					font-size: 24upx;
					font-weight: 500;
					color: rgba(101, 101, 101, 1);
					line-height: 34upx;
					margin-bottom: 18upx;

					.txt {
						flex: none;
						color: #999;
						margin-right: 10upx;
					}

					.txt-info {
						flex: 1;
					}
				}

				.flex-row {
					display: flex;
					justify-content: space-between;

					.row {
						font-size: 24upx;
						font-weight: 500;
						color: rgba(153, 153, 153, 1);
						margin-bottom: 18upx;
					}
				}

				.img-box {
					flex: 1;
					margin-right: 20upx;

					.img {
						width: 90upx;
						height: 90upx;
						border-radius: 6px;
						margin-right: 10upx;
					}
				}
			}
			
			.bottom{
				border: 1px solid #C0C0C0;
				.tr{
					// padding: 0upx 10upx;
				}
			}
			.small_item {
				width: 100%;
				.item_top{
					padding-top: 10upx;
					background-color: #E04110;
					color: #FFFFFF;
				}
				.headImg {
					width: 80upx;
					height: 80upx;
					border-radius: 100upx;
				}
				.staff_info{
					border-top: 1px solid #C0C0C0;
					// margin-bottom: 20upx;
					.td{
						width: 25%;
						height: 80upx;
						word-break: break-word;
						text-align: center;
						&.phone{
							width: 30%;
						}
						&.code{
							width: 20%;
						}
					}
					.td:not(.name){
						line-height: 80upx;
					}
					.border_right{
						border-right: 1px solid #C0C0C0;
					}
					.border_bottom{
						border-bottom: 1px solid #C0C0C0;
					}
				}
			}
		}
	}
}
.upload-img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 146rpx;
	height: 146rpx;
	// margin: 14rpx;
	text-align: center;
	color: #999999;
	border: 2rpx solid #E1E1E1;
	border-radius: 4rpx;
	// padding: 40rpx 0;
	background: #eee;
}
.codePup {
	position: relative;
}

.codePup .img {
	width: 500upx;
	height: 500upx;
}

.del {
	width: 100rpx !important;
	height: 100rpx !important;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 999;
}
.over-word{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.popup{
		margin: 20upx;
	}
	.a{
		text-decoration: underline;
		color: #47b6c2;
	}
</style>
